<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    span{
      display: inline-block;
      width: 70px;
      height: 70px;
      margin: 6px;
      background-color: #f9f9f9;
    }
  </style>
</head>
<!--
侧栏 offcanvas 类似于模态 默认隐藏并在激活时显示 不同之处在于通常用作侧边栏导航菜单
.offcanvas 类创建 offcanvas 侧边栏。
.offcanvas-start 类定位 offcanvas，并将其宽度设置为 400px。有关更多的定位类，请参见下面的实例。
.offcanvas-title 类确保了适当的外边距和行高。
然后，将您的内容添加到 .offcanvas-body 类中。
如需打开 offcanvas 侧边栏，您必须使用 <button> 或 <a> 元素指向 .offcanvas 容器的 id（在我们的例子中为 #demo）。
如需使用 <a> 元素打开 offcanvas 侧边栏，您可以使用 href 属性而不是 data-bs-target 属性指向 #demo。
Offcanvas 定位
请使用 .offcanvas-start|end|top|bottom 将 offcanvas 定位到左侧、右侧、顶部或底部：
utility /helper类 可以在不使用css代码的情况下快速设置元素样式
边框 使用边框类为元素添加或删除边框

根据屏幕宽度向左或向右浮动元素，使用响应式浮动类 (.float-*-left|right)，其中 * 是：

sm (> = 576px)
md (> = 768px)
lg (> = 992px)
xl (> = 1200px)
xxl (> = 1400px)
实例
居中对齐
使用 .mx-auto 类居中元素（添加 margin-left 和 margin-right: auto）：
宽度
使用 w-* 类（.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）设置元素的宽度：

-->
<body>
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">标题1</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>一些文本,一些文本,一些文本</p>
    <p>一些文本,一些文本,一些文本</p>
    <p>一些文本,一些文本,一些文本</p>
    <button class="btn btn-secondary" type="button"></button>
  </div>
</div>
<div class="container-fluid mt-3">
  <h3>Offcanvas 侧栏</h3>
  <p>Offcanvas 类似于模态，不同之处在于它经常用作侧边栏。</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    打开 Offcanvas 侧栏
  </button>
</div>
<div>
  <h2>使用边框类为元素添加或删除边框：</h2>
  <span class="border"></span>
  <span class="border border-0"></span>
  <span class="border border-top-0"></span>
  <span class="border border-right-0"></span>
  <span class="border border-bottom-0"></span>
  <span class="border border-left-0"></span>
  <br>
  <span class="border-top"></span>
  <span class="border-end"></span>
  <span class="border-bottom"></span>
  <span class="border-start"></span>
  <h2>使用.border-1到.border-5 来改变边框的宽度</h2>
  <span class="border border-1"></span>
  <span class="border border-2"></span>
  <span class="border border-3"></span>
  <span class="border border-4"></span>
  <span class="border border-5"></span>
  <h2>使用任意上下文边框颜色类向边框添加颜色</h2>
  <span class="border border-primary"></span>
  <span class="border border-secondary"></span>
  <span class="border border-success"></span>
  <span class="border border-danger"></span>
  <span class="border border-warning"></span>
  <span class="border border-info"></span>
  <span class="border border-light"></span>
  <span class="border border-dark"></span>
  <span class="border border-white"></span>
  <h2>使用rounded类为元素添加圆角</h2>
  <span class="rounded"></span>
  <span class="rounded-top"></span>
  <span class="rounded-end"></span>
  <span class="rounded-bottom"></span>
  <span class="rounded-start"></span>
  <span class="rounded-circle"></span>
  <span class="rounded-pill" style="width:130px"></span>
  <span class="rounded-0"></span>
  <span class="rounded-1"></span>
  <span class="rounded-2"></span>
  <span class="rounded-3"></span>
  <h2>使用.float-end类向右浮动元素,或使用.float-start向左浮动,并使用 .clearfix类清除浮动</h2>
  <div>
    <span class="float-start">向左浮动</span>
    <span class="float-end">向左浮动</span>
  </div>
</div>

</body>
</html>
